<template>
  <div>
  <div id="One" v-for="item in this.content">
    <div id="title">{{item.title}}</div>
    <br/>
    <div id="content">{{item.article}}</div>
  </div>
  </div>
</template>

<script>
import {ArticalGet,ArticalPost} from "../../requests/api";
export default {
  name: "ArticalShow",
  data() {
    return {
      //文章总数
      count: '',
      page: 4, //博客一页展示多少文章
      title: [],//每篇文章标题
      content: [],//每篇文章展示内容
      nowPage: 1,
      article:[],
      pageNums:1,
      num:0,
    }
  },
  created(){
    this.GetArtical()
  },
  mounted() {
    this.postPage()
  },
  methods:{
    GetArtical(){          //获取文章
      ArticalGet().then(
          (res)=> {
            this.article = res
            this.fenye()
          }
      )//
    },
    fenye()
    {
      this.content=[]
      let startArticle = (this.nowPage * 4) - 4//记录第几篇文章开始显示
      let endArticle = (this.nowPage * 4) - 1//记录第几篇文章结束显示
      let num1=0
      for (const item of this.article) {
        if (num1 >= startArticle && num1 <= endArticle) {
          this.content.push(item)
        }
        if (num1 >= endArticle)
          break;
        num1++;
      }
    },
    postPage(){
      this.$EventBus.$on("getPage",(data)=>{
        this.nowPage=data
        //console.log(this.nowPage)
        this.fenye()
      })
    }
  }
}
</script>

<style scoped>
#One{
  border-style: groove;
  height: 180px;
}
</style>
